import React, { Component } from 'react';
import empty from '../../assets/images/empty.jpg'
import { NavBar } from "antd-mobile";

import "./Cart.scss"
class Cart extends Component {
  state = {
    carts: [],
    checkAll:true,
  }
  //获取本地缓存中的购物车数据
  componentDidMount() {
    let carts_str = localStorage.getItem('carts')
    let carts = JSON.parse(carts_str || "[]")
    this.setState({
      carts
    })
  }
  //是否选中
  handleSelect = (id) => {
    let carts_str = localStorage.getItem('carts')
    let carts = JSON.parse(carts_str || "[]")
    let index = carts.findIndex(v=>{
        if(v.goods_id == id){
          return true
        }
    })
    //改变是否选中
    carts[index].checked = !carts[index].checked
    localStorage.setItem('carts',JSON.stringify(carts))
    this.setState({
      carts
    })
  } 
  //是否全选
  handleCheckAll = (params) => {
    let carts_str = localStorage.getItem('carts')
    let carts = JSON.parse(carts_str || "[]")
  }
  
  render() {
    let { carts } = this.state

    return (
      <div className="yg-cart">
        {
          !!this.state.carts.length ?
           <div className='yg-cart-content'>
            <div className="nav-box">
              <NavBar className='cart-content-nav'>优购商城</NavBar>
            </div>
            {/* 列表内容开始 */}
            <div className='cart-content-main'>
              {
                this.state.carts.map((v, i) => {
                  return (
                    <div key={v.goods_id} className="content-main-item">
                      <div className='main-item-left'>
                        <i onClick={this.handleSelect.bind(this,v.goods_id)} 
                         className={v.checked?'iconfont icon-xuanzhong iconActive':"iconfont icon-weixuanzhongyuanquan"}></i>
                      </div>
                      <div className='main-item-mid'>
                        <img src={v.goods_small_logo} alt="" />
                      </div>
                      <div className="main-item-right">
                        <div className='item-right-top'>
                          {v.goods_name}
                        </div>
                        <div className="item-right-bottom">
                          <div className="right-bottom-left">
                            <span className='price'>￥{v.goods_price}</span>
                          </div>
                          <div className='right-bottom-right'>
                            <i className='iconfont icon-iconset0187'></i>
                            <span className='num'>{v.num}</span>
                            <i className='iconfont icon-icon-'></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
            {/* 列表内容结束 */}
            {/* 底部结算开始 */}
            <div className='cart-content-bottom'>
              <div className='content-bottom-left'>
                <div className='bottom-left-item1'>
                  <i onClick={this.handleCheckAll} className={this.state.checkAll ? 'iconfont icon-xuanzhong activeQuan' : "iconfont icon-weixuanzhongyuanquan"}></i>
                  <span>全选</span>
                </div>
                <div className='bottom-left-item2'>
                    合计:
                <span>￥1111</span>
                </div>
              </div>
              <div className='content-bottom-right'>
                <div className='bottom-right-toBuy'>
                    <div>去结算(<span>1</span>)</div>
                </div>
              </div>
            </div>
            {/* 底部结算结束 */}
          </div>
            : <div
              className="yg-cart-empty">
              <img src={empty} className="cart-empty-img" alt="" />
              <h3 className="empty_text"><a href="#/classify">去逛逛</a></h3>
            </div>
        }

      </div>
    );
  }
}

export default Cart;